<!DOCTYPE html>
<html lang="en">
<head>
  <title>Test::inputs with events on clear</title>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>Page with input events on clear</h1>

<div style="width: 400px">
  <form>
    <fieldset title="Login form">
      <label> Username (oninput):
        <input id="username_input" value=""/>
      </label>
      <div id="usernameHint" style="display: none">Username is not empty</div>
      <br/>
    </fieldset>
  </form>
</div>

<script type="text/javascript">
  (() => {
    const hint = document.getElementById('usernameHint')
    const input = document.getElementById('username_input')

    const changeListener = () => {
      // hint appears when field is not empty
      hint.style.display = (input.value === '') ? 'none' : 'block';
    }

    input.addEventListener('input', changeListener)
    input.addEventListener('change', changeListener)
  })()
</script>
</body>
</html>
